<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全国疫情统计</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
    <link rel="stylesheet" href="../dist/css/layui.css">
    <link rel="stylesheet" href="../layui/css/modules/layer/default/layer.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">疫情可视化系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="../img/admin2.png" class="layui-nav-img">
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:window.location ='regist.html';">用户注册</a></dd>
                    <dd><a href="javascript:window.location ='login.html';">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:window.location = 'country.html';">全国疫情统计</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:window.location ='guizhou.html';">贵州省</a></dd>
                        <dd><a href="javascript:window.location ='yunnan.html';">云南省</a></dd>
                        <dd><a href="javascript:window.location ='xianggang.html';">香港</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item "><a href="javascript:window.location = 'admin.html';">管理员列表</a></li>
                <li class="layui-nav-item"><a href="javascript:window.location = 'patience.html'">患者信息管理</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
        <!--        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>-->
        <div id="main" style="width: 100%;height: 100%"></div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        疫情可视化系统
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>


<script src="../dist/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option;
    myChart.showLoading();

    $.get('../json/full.json', function (geoJson) {
        myChart.hideLoading();
        echarts.registerMap('HK', geoJson);
        myChart.setOption(option = {
            title: {
                text: '全国疫情统计',
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {
                        readOnly: false
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                min: 0,
                max: 55000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [{
                name: '疫情密度',
                type: 'map',
                mapType: 'HK', // 自定义扩展图表类型
                label: {
                    show: true
                },
                data: [{
                    name: '北京',
                    value: 20057.34
                },
                    {
                        name: '新疆',
                        value: 15477.48
                    },
                    {
                        name: '湖北',
                        value: 51686.1
                    },
                    {
                        name: '内蒙',
                        value: 6992.6
                    },
                    {
                        name: '黑龙江',
                        value: 44045.49
                    },
                    {
                        name: '吉林',
                        value: 40689.64
                    },
                    {
                        name: '辽宁',
                        value: 37659.78
                    },
                    {
                        name: '天津',
                        value: 45180.97
                    },
                    {
                        name: '山西',
                        value: 5524.26
                    },
                    {
                        name: '山东',
                        value: 21900.9
                    },
                    {
                        name: '宁夏',
                        value: 4918.26
                    },
                    {
                        name: '陕西',
                        value: 5881.84
                    },
                    {
                        name: '甘肃',
                        value: 4178.01
                    },
                    {
                        name: '青海',
                        value: 2227.92
                    },
                    {
                        name: '西藏',
                        value: 2180.98
                    },
                    {
                        name: '四川',
                        value: 9172.94
                    },
                    {
                        name: '重庆',
                        value: 3368
                    },
                    {
                        name: '河南',
                        value: 806.98
                    },
                    {
                        name: '安徽',
                        value: 806.98
                    },
                    {
                        name: '江苏',
                        value: 806.98
                    },
                    {
                        name: '上海',
                        value: 806.98
                    },
                    {
                        name: '浙江',
                        value: 806.98
                    },
                    {
                        name: '江西',
                        value: 806.98
                    },
                    {
                        name: '河北',
                        value: 806.98
                    },
                    {
                        name: '湖南',
                        value: 806.98
                    },
                    {
                        name: '贵州',
                        value: 0
                    },
                    {
                        name: '云南',
                        value: 806.98
                    },
                    {
                        name: '广西',
                        value: 806.98
                    },
                    {
                        name: '广东',
                        value: 50610.98
                    },
                    {
                        name: '海南',
                        value: 806.98
                    },
                    {
                        name: '福建',
                        value: 806.98
                    },
                    {
                        name: '台湾',
                        value: 806.98
                    },
                    {
                        name: '香港',
                        value: 806.98
                    },
                    {
                        name: '澳门',
                        value: 806.98
                    }
                ],
            }]
        });
    });
</script>
</body>
</html>
